<template>
    <div class="cmt_container">
        <!--
            1.编写评论子组件
            2.在需要父组件中import子组件路径
            3.在components属性中引入comment，来使用评论子组件
         -->

        <!-- <h3>发表评论</h3> -->
        <h3>发表评论</h3>
        <hr>
        <div v-if="this.$store.state.flag" class="sign-cmt" >
        <textarea placeholder="请输入要bb的内容（最多吐槽120字）" maxlength="120" rows="5" cols="110" v-model="comments"></textarea>
        <el-button size="medium" type="primary"  @click="submitComments">立即评论</el-button>
        <!-- <edit></edit> -->
        </div>
                <!-- 未登录不显示评论功能 -->
        <div v-else class="unsign-cmt">
            <p>评论功能需要登陆才能使用</p>
            <el-button size="medium" type="primary"  @click="gotologin">立即去登陆</el-button>
        </div>
        
        <h4>全部评论</h4><hr>
        <!-- 评论item -->
        <div class="cmt_list">
            
            <div class="cmt_item" v-for="(item,i) in commentlist" :key="item.id">
               <!-- 评论头像 -->
               <div class="title-img"><el-avatar :size="50"></el-avatar> </div>
                <!-- 评论人信息 -->
                <div class="cmt_title">
                    <span><h4>{{item.name}}</h4></span>
                    <span>{{item.time | dataFormat}}</span>
                </div>
                <div class="cmt_body">
                    {{item.text}}
                    <div class="cmt_reply">
                        <i class="el-icon-s-comment" @click="replyshow(i)">12</i>
                        <i class="el-icon-star-on">12</i>
                </div>
                    </div>
                    <!-- 回复框 -->
                    <div class="reply_item" v-for="itemson in item.replyItem" :key="itemson.replyId">
                        <!-- 回复头像 -->
                        <!-- <div class="reply-img"><el-avatar :size="50"></el-avatar></div> -->
                        <!-- 回复人信息 -->
                        <div class="reply_body">
                            <span>
                                <span><h4>{{itemson.user}}</h4>评论<h4>{{item.user}}</h4>：</span>
                                <span>{{itemson.reply_body}}</span>
                                </span>
                            <span style="color:blue;">{{itemson.reply_time | dataFormat}}</span>
                        </div>
                        
                    </div>
                    <div class="replyarea" v-show="_replyshow(i)">
                        <textarea name="reply_tr" id="" cols="70" rows="1" placeholder="请输入评论..." class="reply_tr" v-model="replyComments"></textarea>
                        <el-button size="small" type="primary" @click="submitReplyComments(i)">回复</el-button>
                    </div>
                    <hr>
            </div>
            </div>
              
        <b-button variant="outline-danger" @click="getMore()" class="loadBtn">加载更多</b-button>
    </div>

</template>
<script>
// import wenzhang_edit from '../wenzhang_edit.vue'
export default {
    data() {
        return {
            commentlist:[],
            id:this.$route.params.id,
            pageIndex:1,
            comments:'',
            replyComments:'',
            index:0,//控制关闭回复框的标识
        }
    },
    created() {
        this. getComments()
    },
    methods: {
        getComments(){
            //pageindex 可以定位到那一页的评论数据
            this.$http.get('/discuss/dis/' + this.id +"/" + this.pageIndex+'/4' ).then(res=>{
                // window.console.log(res.data)
                var commentsum=[]
                for(var i=0;i<res.data.max_wen;i++){
                        //  window.console.log(i)
                        commentsum.push({id:res.data.xuhao[i],name:res.data.name[i],text:res.data.text[i],time:res.data.dis_time[i],
                        replyshow:false,replyItem:res.data.in[i]})
                    }
               for(let i in commentsum){
                  this.commentlist.push(commentsum[i])
                    }
            })
        },
        getMore(){
            this.pageIndex++;
            this.getComments();
        },
        submitComments(){
            let params = new URLSearchParams()
            params.append("userid",this.$store.state.userid)
            params.append('context',this.comments)
            this.$http.post('/discuss/increase/'+this.id,params).then(res=>{
                window.console.log(res)
                this.pageIndex=1;
                this.getComments();
                this.comments=''
            })
        },
        submitReplyComments(i){
            let params = new URLSearchParams()
            params.append("userid",this.$store.state.userid)
            params.append('context',this.comments)
            params.append('xuhao',this.commentlist[i].id)
            params.append('toname',this.commentlist[this.commentlist[i].id-1].name)
            // window.console.log(this.commentlist[i].name)
            // window.console.log(parseInt(this.commentlist[i].id))
            this.$http.post('/discuss/increase/internal/'+this.id,params).then(res=>{
                window.console.log(res)
            })
        },
        gotologin(){
            this.$router.push('/login')
        },
        replyshow(i){
            this.commentlist[this.index].replyshow=false
            this.index=i
            this.commentlist[i].replyshow=true
        },
        _replyshow(i){
            return this.commentlist[i].replyshow
        }
    },

}
</script>
<style scoped>
.cmt_item{
    margin-top: 15px;
}
textarea{
    font-size: 14px;
    margin: 0;
    resize: none;
}
.cmt_reply{
    color: gray;
    /* position: absolute;
    right: 10px; */
    padding-left: 60%;
    cursor: pointer;
    /* border: 1px solid red; */
}
/* .cmt_item{
    border: 1px solid red;
} */
.title-img{
    /* border: 1px solid red; */
    display: inline-block;
    padding-left: 5px;
}
.cmt_title{
/* border: 1px solid red; */
display: inline-block;
padding-left: 10px;
}
.cmt_title span:last-of-type{
    color: gray;
}
.cmt_title span{
    display: block;
    padding: 4px;
}
.cmt_body{
    /* height: 500px; */
line-height: 35px;
text-indent: 3em;
margin-right: 100px;
/* border: 1px solid red; */
}
.unsign-cmt{
    text-align: center;
    height: 100px;
}
.sign-cmt{
    height: 200px;
}
.reply_item{
    margin-left: 50px;
    margin-right: 80px;
    /* border: 1px solid red; */
    background-color: #eee;
    height: 50px;
}
.reply-img{
    
    display: inline-block;
}
.reply_body{
    /* display: inline-block; */
    /* border: 1px solid red; */
    display: flex;
    justify-content: space-between;
    margin:0 30px;
    /* padding-right: 100px; */
    /* border-top: 50px; */
    position: relative;
    top: 12px;
}
h4{
    font-size: 17px;
    display: inline;
    font-weight: bold;
}
.reply_tr{
    
    /* border: solid 1px red; */
    vertical-align:middle;
    border: solid 1px #409EFF;
    padding: 4px;
  }
  .replyarea{
    height: 50px;
      /* border: 1px solid red; */
    margin-left: 80px;
    margin-top: 10px;
  }
  .loadBtn{
      width: 100%;
  }
</style>
